<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新闻列表</title>
    <link rel="stylesheet" type="text/css" href="/frontdesk/css/common.css">
    <link rel="stylesheet" href="/frontdesk/css/search.css">
    <script src="/frontdesk/js/jquery-3.3.1.js"></script>
    <!--    分页插件-->
    <script src="/frontdesk/js/bootstrap-paginator.js"></script>

    <style>
        li{
            cursor: pointer;
        }
        .title {
            font-size: 30px;
            width: 230px;
            /* 不换行，显示省略号 */
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .publisher {
            width: 250px;
            font-size: 14px;
            color: #928f8f;
            /* 不换行，显示省略号 */
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .newsData {
            color: #cccccc;
        }

        .newDesc p {
            /* p标签宽度250px，高度100px，换行，显示省略号 */
            width: 250px;
            height: 100px;
            white-space: normal;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            /** 对象作为伸缩盒子模型显示 **/
            -webkit-box-orient: vertical;
            /** 设置或检索伸缩盒对象的子元素的排列方式 **/
            -webkit-line-clamp: 5;
            /** 显示的行数 **/
            font-size: 14px;
            color: #928f8f;
            margin-bottom: 0px;
        }
        .search {
            position: absolute;
            right: 30px;
            top: 50px;
        }

        .search_input {
            float: left;
            width: 400px;
            height: 40px;
            border: 2px solid var(--primary-color);
            padding-left: 10px;
        }

        .search_input:focus {
            outline: none;
        }

        .search-button {
            float: left;
            width: 90px;
            height: 40px;
            background: var(--primary-color);
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-size: 18px;
        }
        .logo{
            display: none;
        }
    </style>
</head>

<body>
    <!--引入头部-->
    <header th:replace="~{/frontdesk/header::header}"></header>
    <div th:insert="~{/frontdesk/search::search}"></div>


    <div class="page_one">
        <div class="contant" style="display: flex; padding: 0;">
            <div class="left"  style="margin-top: 30px">
                <ul>
                    <li th:each="news:${newsPage1.records}" class="col-md-6"
                        style="width: 500px;margin-left: 30px;height: 300px;">
                        <img th:src="${news.pImage}" width="320">
                        <div class="content">
                            <p class="title" th:text="${news.newsName}"></p>
                            <p class="publisher" th:text="'作者:'+${news.newsPublisher}"></p>
                            <p class="newsData" th:text="${news.newsData}"></p>
                            <div class="newDesc" th:utext="${news.newDesc}"></div>
                            <div>
                                <p class="details">
                                    <a th:href="${news.url}">查看详情</a>
                                </p>
                            </div>
                            </p>
                        </div>
                    </li>

                </ul>
                <!-- .box-footer-->
                <div class="box-footer">

                    <div class="box-tools pull-right">
                        <ul class="pagination"></ul>
                    </div>
                </div>

                <!-- 在js中获取Model的值 -->
                <script th:inline="javascript">
                    $(function () {
                        var currentPage = [[${newsPage1.current}]]; // 当前页
                        var pages = [[${newsPage1.pages}]]; // 总页数


                        // 分页插件
                        $('.pagination').bootstrapPaginator({
                            bootstrapMajorVersion: 3, // bootstrap版本
                            currentPage: currentPage, // 当前页
                            totalPages: pages, // 总页数
                            numberOfPages: 5, // 最多显示多少页
                            itemTexts: function (type, page, current) {
                                switch (type) {
                                    case "first":
                                        return "首页";
                                    case "prev":
                                        return "上一页";
                                    case "next":
                                        return "下一页";
                                    case "last":
                                        return "末页";
                                    case "page":
                                        return page;
                                }
                            },
                            onPageClicked: function (event, originalEvent, type, page) { // 点击页码执行的方法
                                location.href = "/frontdesk/news/newsList?page=" + page;
                            }
                        });
                    })
                </script>
            </div>

        </div>
    </div>
    </div>
    </div>


    <script>
        // 获取所有的li元素
        const navItems = document.querySelectorAll('.nav li');

        // 移除其他li元素的active类名
        navItems.forEach(li => {
            li.classList.remove('nav-active');
        });
        navItems[1].classList.add('nav-active')
    </script>
</body>

</html>